<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="取消任务" width="50%" align-center>
      <ColumnsTable :columns="columns" :data="data">
        <template #value="{ scope }">
          <template v-if="scope.prop === 'taskType'">
            <div class="status">
              <div class="circle" :style="{ backgroundColor: `${TAG_CONFIG[scope.data.taskStatus]?.color}` }" />
              <p :style="{ color: `${TAG_CONFIG[scope.data.taskStatus]?.color}` }">{{ scope.data.taskStatusDesc }}</p>
              <p v-if="scope.data.timeOut === 1" :style="{ color: '#EF4444', marginLeft: '4px' }">超期</p>
            </div>
          </template>
        </template>
      </ColumnsTable>
      <px-form ref="checkFormRef" :inline="false" :model="formValue" label-position="right" label-width="100px">
        <px-form-item label="取消原因" prop="opinion" :rules="[{ required: true, message: '取消原因不能为空', trigger: 'change' }]">
          <px-input
            v-model="formValue.opinion"
            type="textarea"
            placeholder="请输入"
            :autosize="{ minRows: 3, maxRows: 4 }"
            maxlength="500"
            clearable
          />
        </px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="dialogVisible = false">取消</px-button>
          <px-button type="primary" @click="handleSubmit">确认取消</px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { cancelTask } from "@/api/erc/inspectTask";
import { PxMessage } from "px-ui";
import { ref } from "vue";
import ColumnsTable from "../../components/ColumnsTable.vue";
import { TAG_CONFIG } from "../config";
const props = defineProps(["data"]);
const dialogVisible = defineModel("dialogVisible");
const columns = [
  [
    {
      label: "巡检任务编号",
      value: "taskNo"
    },
    {
      label: "巡检任务名称",
      value: "taskName"
    }
  ],
  [
    {
      label: "任务开始时间",
      value: "startTime"
    },
    {
      label: "任务结束时间",
      value: "endTime"
    }
  ],
  [
    {
      label: "巡检组",
      value: "checkGroupDesc"
    },
    {
      label: "执行状态",
      type: "status",
      value: "taskType"
    }
  ]
];
// 表单
const checkFormRef = ref();
// 表单的值
const formValue = ref<{ opinion?: string; acceptorId?: number }>({});
const emits = defineEmits(["refresh"]);
// 提交
const handleSubmit = async () => {
  checkFormRef.value.validate(async valid => {
    if (valid) {
      const { taskNo } = props.data;
      const { opinion } = formValue.value;
      await cancelTask({ taskNo, opinion });
      emits("refresh");
      dialogVisible.value = false;
      PxMessage.success("取消成功");
    }
  });
};
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}

.status {
  display: flex;
  flex-direction: row;
  align-items: center;

  .circle {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
  }
}
</style>
